<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 500px;
            border: 1px solid blue;
        }
        #box div{
            width: 100px;
            height: 50px;
            background-color: red;
            margin-top: 10px;
            opacity: 1;
        }
        #box div:hover{
            width: 400px;
            opacity: 0.1;
        }
        #box1{
            transition-property: all;
            transition-duration: 5s;
            transition-timing-function: linear;
        }
        #box2{
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: ease-in;
        }
        #box3{
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: ease-out;
        }
        #box4{
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: ease-in-out;
        }
        #box5{
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: ease;
        }
        #box6{
            transition-property: width;
            transition-duration: 5s;
            transition-timing-function: cubic-bezier(268, 153, 261, 4);
        }



    </style>
</head>
<body>
   <div id="box">
       <div id="box1">匀速</div>
       <div id="box2">加速</div>
       <div id="box3">减速</div>
       <div id="box4">先加速后减速</div>
       <div id="box5">逐渐变慢</div>
       <div id="box6">贝塞尔曲线</div>


   </div>
</body>
</html>